<template>
	<div>
		<!-- 1.0 头部导航结构 -->
		<MyNavbar title="我的收藏"></MyNavbar>
		<!-- 2.0 收藏列表 -->
		<div class="list">
			<van-swipe-cell v-for="item in starList" :key="item.id">
				<MyNews :news="item"></MyNews>
				<template #right>
					<van-button
						square
						type="danger"
						text="删除"
						class="delete-btn"
						@click="deleteFn(item.id)"
					/>
				</template>
			</van-swipe-cell>
		</div>
		<!-- 如果列表为空 - 展示空状态 -->
		<van-empty v-if="!starList.length" description="空空如也" />
	</div>
</template>

<script>
import MyNews from '../components/MyNews.vue';
import MyNavbar from '../components/MyNavbar.vue';
export default {
	components: {
		MyNews,
		MyNavbar
	},
	data() {
		return {
			starList: []
		};
	},
	async created() {
		const result = (await getUserStarAPI()).data.data;
		// console.log(result);
		this.starList = result.map(item => ({
			...item,
			comment_length: item.comments.length
		}));
		console.log(this.starList);
	},
	methods: {
		// 删除收藏文章
		async deleteFn(id) {
			// 弹窗确认
			this.$dialog.confirm({ title: '不爱了吗？' }).then(async () => {
				const { message } = (await editStarAPI(id)).data;
				this.starList = this.starList.filter(item => item.id !== id);
				// console.log(message)
				this.$toast(message);
			});
		}
	}
};
</script>

<style lang="less" scoped>
.delete-btn {
	height: 100%;
}
</style>
